/*
  学习目标：props的两大特点 - 可以传递任意数据类型
    1. props可以是任意数据类型
      1.1 数字 字符串 数组 对象 null boolean undefined
      1.2 💥函数 💥jsx
    2. props是只读的, 单向数据流
  
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        App
        <Child
          list={[1, 2, 3]}
          person={{ gender: '男', hobby: '女' }}
          name="zs"
          age={18}
          nu={null}
          un={undefined}
          isShow={true}
          // 💥 函数
          fn={() => {
            alert('我被弹出了');
          }}
          // 💥jsx
          title={<i>我是斜着的</i>}
        ></Child>
      </div>
    );
  }
}

function Child({ title, fn, name, age, list, person, nu, un, isShow }) {
  console.log('fn  ----->  ', fn); // fn是什么??
  return (
    <div>
      {title}
      <button onClick={fn}>点我 </button>
      <h1>
        Child- {name} - {age}
      </h1>
      <h3>{list}</h3>
      <h4>
        {person.gender} - {person.hobby}
      </h4>
      <h2>{nu}</h2>
      <h2>{un}</h2>
      <h2>{isShow}</h2>
    </div>
  );
}
